<!--楼宇设备-->
<template>
  <div class="main">
    <!--头部-->
    <basic-layout title="服务设备详情" :showAddBtn="false">

      <!--数据-->
      <van-form class="dataStyle" ref="form">
        <van-cell-group>
          <div class="cellDataStyle">
            <div class="imgStyle1"/>
            <div class="cellTextStyle">
              <van-field
                readonly
                disabled
                v-model="dataInfo.SWIDBM"
                label="实物ID"
                input-align="right"
              />
            </div>
          </div>

          <div class="cellDataStyle">
            <div class="imgStyle2"/>
            <div class="cellTextStyle">
              <van-field
                readonly
                disabled
                v-model="dataInfo.PINM"
                label="设备名称"
                input-align="right"
              />
            </div>
          </div>

          <div class="cellDataStyle">
            <div class="imgStyle3"/>
            <div class="cellTextStyle">
              <van-field
                readonly
                disabled
                v-model="dataInfo.XINGH"
                label="设备型号"
                input-align="right"
              />
            </div>
          </div>

          <div class="cellDataStyle">
            <div class="imgStyle4"/>
            <div class="cellTextStyle">
              <van-field
                readonly
                disabled
                v-model="dataInfo.UNIT"
                label="单位"
                input-align="right"
              />
            </div>
          </div>

          <div class="cellDataStyle">
            <div class="imgStyle5"/>
            <div class="cellTextStyle">
              <van-field
                readonly
                disabled
                v-model="dataInfo.DANJ"
                label="单价(元)"
                input-align="right"
              />
            </div>
          </div>

          <div class="cellDataStyle">
            <div class="imgStyle6"/>
            <div class="cellTextStyle">
              <van-field
                readonly
                disabled
                v-model="dataInfo.SBDL"
                label="设备大类"
                input-align="right"
              />
            </div>
          </div>

          <div class="cellDataStyle">
            <div class="imgStyle7"/>
            <div class="cellTextStyle">
              <van-field
                readonly
                disabled
                v-model="dataInfo.SBXL"
                label="设备小类"
                input-align="right"
              />
            </div>
          </div>

          <div class="van-hairline--top vanHairlineTop"></div>

          <div class="cellTextStyleSingle">
            <van-field
              readonly
              disabled
              v-model="dataInfo.FANGCNAME"
              label="楼宇信息"
              input-align="right"
            />
          </div>
          <div class="cellTextStyleSingle">
            <van-field
              readonly
              disabled
              v-model="dataInfo.LOUCNAME"
              label="楼层信息"
              input-align="right"
            />
          </div>
          <div class="cellTextStyleSingle">
            <van-field
              readonly
              disabled
              v-model="dataInfo.FANGJNAME"
              label="房间信息"
              input-align="right"
            />
          </div>

          <div class="van-hairline--top vanHairlineTop"></div>

          <div class="cellTextStyleSingle">
            <van-field
              readonly
              disabled
              v-model="dataInfo.GYSMC"
              label="供应商"
              input-align="right"
            />
          </div>

          <div class="cellTextStyleSingle">
            <van-field
              readonly
              disabled
              v-model="dataInfo.SHENCRQ"
              label="生产日期"
              input-align="right"
            />
          </div>
          <div class="cellTextStyleSingle">
            <van-field
              readonly
              disabled
              v-model="dataInfo.RUKRQ"
              label="入库日期"
              input-align="right"
            />
          </div>
          <div class="cellTextStyleSingle">
            <van-field
              readonly
              disabled
              v-model="dataInfo.SHIYQX"
              label="使用期限(月)"
              input-align="right"
            />
          </div>

          <div class="cellTextStyleSingle">
            <van-field
              readonly
              disabled
              v-model="dataInfo.PEIZRQ"
              label="配置日期"
              input-align="right"
            />
          </div>
          <div class="cellTextStyleSingle">
            <van-field
              readonly
              disabled
              v-model="dataInfo.TUIYRQ"
              label="退役日期"
              input-align="right"
            />
          </div>

          <!--此处会跳转到选人界面-->
          <div class="cellTextStyleSingle rightCellStyle">
            <van-field
              readonly
              disabled
              v-model="dataInfo.BAOGRNAME"
              label="保管人"
              input-align="right"
            />
          </div>

          <div class="cellTextStyleSingle">
            <van-field
              readonly
              disabled
              v-model="dataInfo.LINGYRDW"
              label="领用人所属单位"
              input-align="right"
            />
          </div>

          <div class="cellTextStyleSingle">
            <van-field
              readonly
              disabled
              v-model="dataInfo.SBBS"
              label="设备标识"
              input-align="right"
            />
          </div>

          <div class="cellTextStyleSingle">
            <van-field
              readonly
              disabled
              v-model="dataInfo.ERPBS"
              label="ERP编码"
              input-align="right"
            />
          </div>

          <div class="cellTextStyleSingle">
            <van-field
              readonly
              disabled
              v-model="dataInfo.BATCH1"
              label="采购批次"
              input-align="right"
            />
          </div>

          <div class="cellTextStyleSingle">
            <van-field
              readonly
              disabled
              v-model="dataInfo.ZHUANGT"
              label="状态"
              input-align="right"
            />
          </div>

          <div class="van-hairline--top vanHairlineTop"></div>

          <div class="remarkStyle">
            <div class="remarkUpTextStyle">
              <div class="imgStyle8"/>
              <div>备注</div>
            </div>
            <div class="remarkDownTextStyle">
              <van-field
                readonly
                disabled
                v-model="dataInfo.BEIZ"
                rows="2"
                autosize
                type="textarea"
              />
            </div>
          </div>
        </van-cell-group>
      </van-form>
      <fullLoading v-if="loading"></fullLoading>
    </basic-layout>
  </div>
</template>
<script>
import { getFuwsbQuanxst } from '@/api/srvAssurance/assetLabel/assetLabel'

export default {
  data () {
    return {
      loading: false,
      dataInfo: {},
    }
  },

  created () {
    if (this.$router.history.current.query.id) {
      this.initData(this.$router.history.current.query.id)
    }
  },

  methods: {
    async initData (id) {
      this.loading = true
      let resData = await getFuwsbQuanxst({ id: id })
      this.loading = false
      this.dataInfo = {}
      if (resData.status === 0) {
        this.dataInfo = resData.data
      }
    },
  },
}
</script>

<style scoped lang="less">
.main {
  height: 100%;
  background-color: #80808017;

  .mainUpStyle {
    background: -webkit-gradient(linear,
    0% 0%,
    100% 0%,
    from(rgb(14 150 216)),
    to(rgba(14, 150, 216, 0.53)));
    height: 55px;

    .upStyle {
      float: left;
      width: 100%;
      height: 56px;
      display: flex;
      justify-content: center;
      align-items: center;

      .textStyle {
        color: #ffff;
        font-size: 20px;
        font-weight: 500;
      }
    }
  }

  .dataStyle {
    overflow-y: scroll;
    height: calc(100% - 75px);
    margin: 10px;
    border-radius: 10px;

    .cellDataStyle {
      width: calc(100% - 30px);
      display: -webkit-inline-box;
      padding: 15px 15px 15px;

      .imgStyle1 {
        height: 24px;
        width: 20px;
        text-align: center;
        background: url("../../../assets/images/nx/icon_barcode.png") no-repeat;
        background-size: 100% 100%;
      }

      .imgStyle2 {
        height: 24px;
        width: 20px;
        text-align: center;
        background: url("../../../assets/images/nx/icon_device_name.png") no-repeat;
        background-size: 100% 100%;
      }

      .imgStyle3 {
        height: 24px;
        width: 20px;
        text-align: center;
        background: url("../../../assets/images/nx/icon_device_model.png") no-repeat;
        background-size: 100% 100%;
      }

      .imgStyle4 {
        height: 24px;
        width: 20px;
        text-align: center;
        background: url("../../../assets/images/nx/icon_device_category.png") no-repeat;
        background-size: 100% 100%;
      }

      .imgStyle5 {
        height: 20px;
        width: 20px;
        margin-top: 2px;
        text-align: center;
        background: url("../../../assets/images/nx/icon_money.png") no-repeat;
        background-size: 100% 100%;
      }

      .imgStyle6 {
        height: 24px;
        width: 20px;
        text-align: center;
        background: url("../../../assets/images/nx/icon_first_category.png") no-repeat;
        background-size: 100% 100%;
      }

      .imgStyle7 {
        height: 24px;
        width: 20px;
        text-align: center;
        background: url("../../../assets/images/nx/icon_second_category.png") no-repeat;
        background-size: 100% 100%;
      }

      .cellTextStyle {
        width: calc(100% - 24px);

        div {
          padding: 0px 0px 0px 15px;
        }
      }
    }

    .vanHairlineTop {
      margin: 0px 25px;
      height: 0px;
    }

    /deep/ .van-hairline--top:after {
      border: 1px solid #00000029;
    }

    .remarkStyle {
      padding: 15px 15px 50px 15px;

      .remarkUpTextStyle {
        display: -webkit-inline-box;

        .imgStyle8 {
          height: 20px;
          width: 20px;
          text-align: center;
          background: url("../../../assets/images/nx/icon_text_filled.png") no-repeat;
          background-size: 100% 100%;
        }
      }

      .remarkDownTextStyle {
        div {
          padding: 0px 0px 0px 5px;
        }
      }
    }

    .cellTextStyleSingle {
      padding: 15px;

      div {
        padding: 0px 0px 0px 15px;
      }
    }
  }

  .vanDialogMainStyle {
    .vanDialogStyle {
      position: fixed;
      width: 100%;
    }

    .vanDialogDataStyle {
      text-align: center;
      margin-top: 50px;

      div {
        padding: 10px;
      }
    }
  }
}

/deep/ .van-dialog {
  height: 70%;
}

/deep/ .van-dialog__content {
  overflow-y: scroll;
  height: 90%;
}

/deep/ .van-field--disabled .van-field__label {
  color: #323233;
}

/deep/ .van-field__control:disabled {
  color: #323233;
  -webkit-text-fill-color: #323233;
}
</style>
